<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式-文本：的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进</title>
</head>

<body>
    <h3 style="color: orchid;"> color 字体颜色</h3>
    <!-- text-indent 文本缩进     -->
    <p style="text-indent: 5em;">text-indent文本缩进；最常见的用途是将段落的首行缩进；可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素</p>
    <p style="text-indent: -5em;">text-indent文本缩进；使用负值或者百分比</p>
    <p style="text-indent: -5em; padding-left: 5em;">text-indent文本缩进；使用负值,再设置一个外边距或一些内边距,防止文本超出</p>

    <!-- text-align 文本排列 -->
    <h3 style="text-align: center;">text-align: 文本排列: 居中</h3>
    <h3 style="text-align: right;">text-right: 文本排列: 右对齐</h3>
    <h3>text-right: 文本排列: 左对齐，默认</h3>
    <h4 style="text-align: left;">text-left: 文本排列: 左对齐（默认）</h4>

    <!-- world-spancing 字体间隔 -->
    <p>word-spacing: 字体间隔；This is a paragraph. The spaces between words will be increased.</p>
    <p style="word-spacing: 5em;">word-spacing: 字体间隔；This is a paragraph. The spaces between words will be increased.</p>

    <!-- letter-spacing 字母间隔 -->
    <h3>letter-spacing: 字母间隔；This is header 1</h3>
    <h3 style="letter-spacing: 1em">letter-spacing: 字母间隔；This is header 1</h3>

    <!-- text-transform 字符转换 -->
    <p>text-transform</p>
    <p style="text-transform: uppercase;">text-transform: uppercase</p>
    <p style="text-transform: lowercase;">text-transform: lowercase</p>
    <p style="text-transform: capitalize;">text-transform: capitalize</p>

    <!-- text-decoration 文本装饰 -->
    <h3>text-decoration:none</h3>
    <a style="text-decoration: none;" href="#">text-decoration:none，去掉下划线装饰</a>
    <h3 style="text-decoration: underline;">text-decoration:underline，上划线</h3>
    <h3 style="text-decoration: overline;">text-decoration:overline，下划线</h3>
    <h3 style="text-decoration:line-through;">text-decoration: line-through，中划线</h3>
    <h3 style="text-decoration: underline overline;">一个规则中结合多种装饰；如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值</h3>

    <!-- white-space 空白处理  -->
    <p style="white-space:pre">
        white-space: 空白会被浏览器忽略。        this is white space
        white-space: 空白会被浏览器忽略。        this is white space
    </p>

    <!-- derection 文本方向 -->
    <h3 style="direction: ltr;">derection ltr文本方向：</h3>
    <h3 style="direction: rtl;">derection rtl文本方向：</h3>

    <p style="line-height: 200px; background-color: orchid; height: 200px;">
        line-height 设置行高
        line-height 设置行高
    </p>

</body>

</html>